<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/category.css">
</head>


<body>

    <div class="suspension">
        <div class="headset">
            <img src="./images/home/headset.png">
        </div>
        <div class="smallshopcart">
            <img src="./images/home/smallshopcart.png">
        </div>
    </div>

    <div class="page-title">分类</div>

    <div class="main">
        <img class="banner" src="./images/category/1.webp">

        <ul class="main-nav">
            <li>全部</li>
            <li>人气热卖</li>
            <li>新品上架</li>
            <li>活动促销</li>
            <li>爆款推荐</li>
        </ul>

        <ul class="category">
            <li>
                <div class="imgbox">
                    <img src="./images/category/10.webp">
                </div>
                <div class="title">
                    <p class="title-text">韩版手工纸草编防晒帽遮阳帽女沙滩帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/2.webp">
                </div>
                <div class="title">
                    <p class="title-text">夏季遮阳帽女防晒遮脸出游百搭沙滩帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/3.webp">
                </div>
                <div class="title">
                    <p class="title-text">沙滩英伦复古短檐麻纱潮定型韩版渔夫帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/4.webp">
                </div>
                <div class="title">
                    <p class="title-text">英伦女士出游爵士帽礼帽冬季蓓蕾帽礼帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/5.webp">
                </div>
                <div class="title">
                    <p class="title-text">宽檐防晒出游帽遮阳休闲平顶帽沙滩帽夏女帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/6.webp">
                </div>
                <div class="title">
                    <p class="title-text">水手经典瓜皮冷帽春季针织毛线帽基础款帽子</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/7.webp">
                </div>
                <div class="title">
                    <p class="title-text">草帽女小清新防晒太阳帽休闲遮阳帽盆帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/8.webp">
                </div>
                <div class="title">
                    <p class="title-text">韩版休闲纯色简约套头帽毛线帽冬季潮女针织帽</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/9.webp">
                </div>
                <div class="title">
                    <p class="title-text">纯羊毛帽子男女情侣针织帽简约套头帽毛线帽秋冬季</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="./images/category/11.webp">
                </div>
                <div class="title">
                    <p class="title-text">冬季蓓蕾帽礼帽秋冬天贝雷帽韩版毛呢百搭英伦</p>
                    <p class="title-price">
                        <span>￥288</span>
                        <img src="./images/home/shopcart.PNG">
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <div class="footer">
        <a class="home" href="./index.html">
            <div class="imgbox">
                <img src="./images/home/home.webp">
                <img class="active" src="./images/home/home-active.webp">
            </div>
            <p>首页</p>
        </a>
        <a class="category" href="./category.html">
            <div class="imgbox">
                <img src="./images/home/category.webp">
                <img class="active" src="./images/home/category-cative.webp">
            </div>
            <p>分类</p>
        </a>
        <a class="shopcart" href="./shopcart.html">
            <div class="imgbox">
                <img src="./images/home/shopcart.webp">
                <img class="active" src="./images/home/shopcart-active.webp">
            </div>
            <p>购物车</p>
        </a>
        <a class="individual" href="./individual.html">
            <div class="imgbox">
                <img src="./images/home/individual.webp">
                <img class="active" src="./images/home/individual-active.webp">
            </div>
            <p>我的</p>
        </a>
    </div>


</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>

</html>